<template>
  <div id="ser-box">
    <div class="block">
      <el-timeline style="text-align: left">
        <el-timeline-item class="item" v-for="(o, i) in count" :key="i" timestamp="2018/4/12" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>搜索结果：</p>
            <div class="link">
              <el-link :underline="false" type="danger" @click="delRecord()">删除</el-link>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import {delSearchRecord, getSearchRecord} from "@/api";

export default {
  inject: ['reload'],
  name: "search-record",
  data(){
    return{
      count: 10,
      reqParams: {
        uid: localStorage.getItem('uid'),
      },
      searchRecordList:[],
    }
  },
  methods:{
    // 加载用户搜索记录
    loadRecord(){
      if (this.reqParams.uid === null){
        this.$message.error("请先登录再操作")
        // this.$router.push('/')
        return;
      }
      getSearchRecord(this.reqParams).then(res => {
        this.searchRecordList = res.data.result;
        console.log(this.searchRecordList)
      }).catch(error => {
        this.$message.error(error)
      })
    },
    // 删除搜索记录
    delRecord(obj){
      const reqObj = {
        uid: this.reqParams.uid,
        search_id: ''
      }
      delSearchRecord(reqObj).then(res => {
        if (res.data.code === '8888') {
          setTimeout(() => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }, 1000);
        }else{
          this.$message.error("删除出错")
        }
        this.reload()
      }).catch(error => {
        this.$message.error(error)
      })
    }
  },
  mounted() {
    this.loadRecord();
  }
}
</script>

<style scoped>
#ser-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.item{
  width: 500px;
  height: 200px;
}
.link{
  text-align: right;
}
</style>
